<template>
  <a-modal
    ref="modal"
    :class="getClass(modalClass)"
    :style="getStyle(modalStyle)"
    :visible="visible"
    v-bind="_attrs"
    :maskClosable="maskClos"
    v-on="$listeners"
    @ok="handleOk"
    @cancel="handleCancel"
    :footer="null"
    destroyOnClose
  >


    <!--有设置标题-->
    <template v-if="!isNoTitle" slot="title">
      <a-row class="j-modal-title-row" type="flex">
        <a-col class="left">
          <slot name="title">
            <span>
            <a @click="changeTitlePDFFun" v-show="showReturn" style="color: #303133;height: 15px">
              <a-icon type="arrow-left"/>
              <span>&nbsp;&nbsp;返回&nbsp;&nbsp;&nbsp;</span>
            </a>
            {{ title }}
              </span>
          </slot>
        </a-col>
        <a-col v-if="switchFullscreen" class="right" @click="toggleFullscreen">
          <a-button class="ant-modal-close ant-modal-close-x" ghost type="link" :icon="fullscreenButtonIcon"/>
        </a-col>

      </a-row>
    </template>
    <!--没有设置标题-->
    <template v-else slot="title">
      <a-row class="j-modal-title-row" type="flex">
        <a-col v-if="switchFullscreen" class="right" @click="toggleFullscreen">
          <a-button class="ant-modal-close ant-modal-close-x" ghost type="link" :icon="fullscreenButtonIcon"/>
        </a-col>
      </a-row>
    </template>

    <!-- 处理 scopedSlots -->
    <template v-for="slotName of scopedSlotsKeys" :slot="slotName">
      <slot :name="slotName"></slot>
    </template>

    <!-- 处理 slots -->
    <template v-for="slotName of slotsKeys" v-slot:[slotName]>
      <slot :name="slotName"></slot>
    </template>

  </a-modal>
</template>

<script>

  import {getClass, getStyle} from '@/utils/props-util'
  import {triggerWindowResizeEvent} from '@/utils/util'

  export default {
    name: 'AJModal',
    props: {
      title: String,
      // 可使用 .sync 修饰符
      visible: Boolean,
      // 是否全屏弹窗，当全屏时无论如何都会禁止 body 滚动。可使用 .sync 修饰符
      fullscreen: {
        type: Boolean,
        default: true
      },
      // 是否允许切换全屏（允许后右上角会出现一个按钮）
      switchFullscreen: {
        type: Boolean,
        default: false
      },
      // 点击确定按钮的时候是否关闭弹窗
      okClose: {
        type: Boolean,
        default: true
      },
      showReturn:{
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        // 内部使用的 slots ，不再处理
        usedSlots: ['title'],
        // 实际控制是否全屏的参数
        innerFullscreen: this.fullscreen,
        // 设置点击蒙层是否关闭弹窗的状态
        maskClos:false,
      }
    },
    computed: {
      // 一些未处理的参数或特殊处理的参数绑定到 a-modal 上
      _attrs() {
        let attrs = {...this.$attrs}
        // 如果全屏就将宽度设为 100%
        if (this.innerFullscreen) {
          attrs['width'] = '800px'
        }
        return attrs
      },
      modalClass() {
        return {
          'j-modal-box': true,
          'fullscreen': this.innerFullscreen,
          'no-title': this.isNoTitle,
          'no-footer': this.isNoFooter,
        }
      },
      modalStyle() {
        let style = {}
        // 如果全屏就将top设为 0
        if (this.innerFullscreen) {
          style['top'] = '0'
        }
        return style
      },
      isNoTitle() {
        return !this.title && !this.allSlotsKeys.includes('title')
      },
      isNoFooter() {
        return this._attrs['footer'] === null
      },
      slotsKeys() {
        return Object.keys(this.$slots).filter(key => !this.usedSlots.includes(key))
      },
      scopedSlotsKeys() {
        return Object.keys(this.$scopedSlots).filter(key => !this.usedSlots.includes(key))
      },
      allSlotsKeys() {
        return Object.keys(this.$slots).concat(Object.keys(this.$scopedSlots))
      },
      // 切换全屏的按钮图标
      fullscreenButtonIcon() {
        return this.innerFullscreen ? 'fullscreen-exit' : 'fullscreen'
      },
    },
    watch: {
      visible() {
        if (this.visible) {
          this.innerFullscreen = this.fullscreen
        }
      },
      innerFullscreen(val) {
        this.$emit('update:fullscreen', val)
      },
    },
    methods: {

      changeTitlePDFFun(){
        this.$emit('changeShowTitle');
      },

      getClass(clazz) {
        return {...getClass(this), ...clazz}
      },
      getStyle(style) {
        return {...getStyle(this), ...style}
      },

      close() {
        this.$emit('update:visible', false)
      },

      handleOk() {
        if (this.okClose) {
          this.close()
        }
      },
      handleCancel() {
        this.close()
      },

      /** 切换全屏 */
      toggleFullscreen() {
        this.innerFullscreen = !this.innerFullscreen
        triggerWindowResizeEvent()
      },

    }
  }
</script>

<style lang="less">
  .j-modal-box {

    &.fullscreen {
      top: 0;
      left: 0;
      padding: 0;

      // 兼容1.6.2版本的antdv
      & .ant-modal {
        top: 0;
        padding: 0;
        height: 100vh;
        margin-left: calc((100% - 1400px)/2);
      }

      & .ant-modal-content {
        height: 100vh;
        border-radius: 0;
        width: 1400px;

        & .ant-modal-body {
          /* title 和 footer 各占 55px */
          height: calc(100% - 30px - 30px);
          padding: 0;
          overflow: auto;
        }
      }

      &.no-title, &.no-footer {
        .ant-modal-body {
          height: calc(100% - 55px);
        }
      }

      &.no-title.no-footer {
        .ant-modal-body {
          height: 100%;
        }
      }
    }

    .ant-modal-close > span {
      height: 6px;
      line-height: 35px;
      color: #303133;
    }

    .j-modal-title-row {
      .left {
        width: calc(100% - 56px - 56px);
        height: 12px;
        line-height: 12px;
        color: #303133;
      }


      .right {
        width: 56px;

        .ant-modal-close {
          height: 6px;
          line-height: 6px;
          right: 56px;
          color: #303133;

          &:hover {
            color: #303133;
          }
        }
      }
    }

    &.no-title {
      .ant-modal-header {
        padding: 0px 12px;
        border-bottom: 0px !important;
      }
    }
  }

  @media (max-width: 1300px) {
    .j-modal-box.fullscreen {
      margin: 0;
      max-width: 100vw;
    }
  }
</style>